import { useMemo } from 'react';
import { Table } from 'antd';
import { MenuOutlined } from '@ant-design/icons';
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
import IconFont from "@/components/IconFont";
import styles from './index.module.less';
import './drag.css';
/**
 * desc: 公共表格组件，方便后期进行样式统一更改 
 * @columns {Array} 表格column配置
 * @data {Array} 表格数据
 * @pagination {object} 表格分页对象
 * @onChange {function} 表格发生变化的函数（分页， 排序，过滤等） 
 * @rowSelection {object} 表格选择功能配置
 * @title {function} 表格顶部添加按钮
 * @size {string} 表格尺寸： default | middle | small
 * @scroll {object} 表格滚动尺寸： scroll: {{ x: 2000, y: 300 }}
 * @rowKey 需要作为key值的字段
 * @handleRowKey 需要格式化key值的函数
 * 
 */

const DragHandle = SortableHandle(() => (
    // <div className={styles.recordItem}>
	// 	<div className={styles.hover}>
	//        <IconFont type="icona-lujing121" />
    //     </div>
    // </div>
	<MenuOutlined
		style={{
			cursor: 'grab',
			color: '#999',
			fontSize: '14px'
		}}
	/>
));

const sortColumns = {
	title: '排序',
	dataIndex: 'sort',
	width: 60,
	className: 'drag-visible',
	render: () => <DragHandle />,
}

const SortableItem = SortableElement((props) => <tr {...props} />);
const SortableBody = SortableContainer((props) => <tbody {...props} />);

export default ({ columns, data, pagination = false, expandable = undefined, onChange = undefined, rowSelection = undefined, title = undefined, scroll = false, size = "middle", rowKey = undefined, handleRowKey = null, showHeader = undefined, onDragEnd, isSortData, className, ...ret }) => {

	//排序相关
	const onSortEnd = ({ oldIndex, newIndex }) => {
		if (oldIndex !== newIndex) {
			const newData = [...data];
			const obj = data[oldIndex];
			newData.splice(oldIndex, 1);
			newData.splice(newIndex, 0, obj);
			onDragEnd && onDragEnd(newData);
		}
	};
	const DraggableContainer = (props) => (
		<SortableBody
			useDragHandle
			disableAutoscroll
			helperClass="row-dragging"
			onSortEnd={onSortEnd}
			{...props}
		/>
	);
	const DraggableBodyRow = ({ className, style, ...restProps }) => {
		// function findIndex base on Table rowKey props and should always be a right array index
		const index = data.findIndex((x) => x[rowKey] === restProps['data-row-key']);
		return <SortableItem index={index} {...restProps} />;
	};

	const handleSetRowKey = (record) => {
		if (rowKey) {
			return record[rowKey];
		}

		if (handleRowKey) {
			return handleRowKey(record);
		}

		return JSON.stringify(record);
	}

	const formatRowSelection = useMemo(() => {
		if (rowSelection) {
			return { columnWidth: 74, ...rowSelection }//传入列宽，即覆盖默认的80，一般处理表格列少，该列过宽
		} else {
			return undefined
		}
	}, [rowSelection])

	const newColumns = isSortData ? [...columns, sortColumns] : columns;
	const components = isSortData ? {
		body: {
			wrapper: DraggableContainer,
			row: DraggableBodyRow,
		},
	} : null
	return (
		<Table
			className={className}
			rowSelection={formatRowSelection}
			columns={newColumns}
			scroll={scroll}
			size={size}
			dataSource={data}
			onChange={onChange}
			pagination={pagination}
			bordered={true}
			expandable={expandable}
			title={title}
			rowKey={handleSetRowKey}
			showHeader={showHeader}
			components={components}
			{...ret}
		/>
	)
} 